<template>
	<button
		:class="['text-title py-2-3 text-center btn', getColorClass(disabled, type), extraClass || '']"
		:disabled="disabled"
		hover-class="btn-active"
		hover-start-time="0"
		hover-stay-time="0"
		:open-type="openType"
		@getphonenumber="getPhoneNumber"
		@click="click"
	>
		<slot>{{ text || '' }}</slot>
	</button>
</template>

<script>
export default {
	props: {
		extraClass: String,
		type: {
			type: String,
			default: 'primary',
		},
		disabled: Boolean,
		text: String,
		//目前只处理了getPhoneNumber
		openType: {
			type: [String, null],
			default: null,
		},
	},
	setup(props, ctx) {
		function getColorClass(disabled, type) {
			if (disabled) {
				return 'bg-primary-op10 color-disable';
			}
			switch (type) {
				case 'success':
					return 'bg-success color-white';
				case 'transparent':
					return 'bg-transparent color-main border b-active';
				case 'normal':
					return 'bg-white color-secondary border b-color-2';
			}
			return 'bg-primary color-white';
		}
		function getPhoneNumber(e){
			ctx.emit("touch", e);
		}
		function click(e){
			if(props.openType){
				return;
			}
			ctx.emit("touch", e);
		}
		return {
			getColorClass,
			getPhoneNumber,
			click,
		};
	},
};
</script>

<style lang="scss">
.btn {
	line-height: 1;
	border-radius: 48rpx;
}
.btn::after {
	content: '';
	display: none;
}
.btn-active {
	opacity: 0.8;
}
</style>
